<!DOCTYPE html>
<html ng-app="GoodTaberApp">
<head>
  <link rel="stylesheet" href="libs/bootstrap.min.css">
  <link rel="stylesheet" href="libs/font-awesome.min.css">

  <link rel="stylesheet" href="stylesheets/popup.css">

  <script src="libs/jquery.min.js"></script>
  <script src="libs/jquery-ui.min.js"></script>
  <script src="libs/angular.min.js"></script>
  <script src="libs/sortable.min.js"></script>
  <script src="libs/lunr.min.js"></script>
</head>
<body>
  <div class="container-fluid" ng-controller="TabListCtrl">
    <div id="search-bar">
      <div class="input-group">
        <div class="input-group-addon"><i class="fa fa-search"></i></div>
        <input placeholder="Search..." ng-model="query" ng-change="filter()" class="form-control">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2">
        <!-- <button class="btn btn-default btn-sm btn-block">Search</button> -->
        <button class="btn btn-default btn-sm btn-block" ng-click="filterByName()">Name</button>
        <button class="btn btn-default btn-sm btn-block" ng-disabled="!tabTimeApiUsable" ng-click="filterByTime()">Time</button>
      </div>
      <div class="container-fluid" id="main-wrapper">
        <div ui-sortable="sortTabOptions" ng-model="tabs" id="main">
        <!-- <div ng-model="tabs" id="main"> -->
          <div ng-repeat="tab in tabs track by $index">
            <div class="tab-detail truncate">
              <button type="button" class="btn btn-link button-icon" ng-click="close(tab)">x</button>
              <button type="button" class="btn btn-link button-icon show-tab" ng-click="active(tab)"><i class="fa fa-caret-right"></i></button>
              <!-- <i class="fa fa-play" ng-click="active(tab)"></i> -->
              {{tab.title}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="scripts/popup.js"></script>
</body>
</html>